<template>
	<view class="bar">
		<view class="share">
			<uni-icons type="paperplane"></uni-icons>
			<text>分享</text>
			<button open-type="share">aaa</button>
		</view>
		<view class="line"></view>
		<view class="share">
			<uni-icons type="weixin"></uni-icons>
			<text>客服</text>
		</view>
		
		<view class="open-drawer" @click="openPopup">立即报名</view>
		<myPopup v-model="showPopup" />
	</view>
</template>

<script setup>
	import {defineProps, ref} from 'vue'
	import myPopup from './popup.vue'
	const props = defineProps({
		info: {
			type: Object,
			default: ()=> ({})
		}
	})
	
	const showPopup = ref(false)
	function openPopup(){
		showPopup.value = true
	}
	
	function onShareAppMessage(){
		const obj = {
			title: props.info.name,
			path: '/pages/schoolDetail/schoolDetail?id=' + props.info.id,
			imgUrl: props.info.cover[0]
		}
		return obj
	}
</script>

<style scoped lang="scss">
	.bar{
		height: 100rpx;
		background: #fff;
		width: 100vw;
		position: sticky;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		padding: 10rpx  30rpx;
		.share{
			width: 80rpx;
			margin: 0 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			text{
				font-size: 26rpx;
			}
			button{
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				opacity: 0;
				z-index: 10;
			}
		}
		.line{
			height: 60rpx;
			border-right: 1rpx solid #EEEEEE;
		}
		.open-drawer{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #5985D0;
			color: #fff;
			margin: 0 40rpx;
			padding: 20rpx 0;
			border-radius: 45rpx;
			transition: background .2s;
			&:active{
				background: #517bbe;
			}
		}
	}
</style>